<template>
  <div class="user">
    <h4>业主管理</h4>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="搜索">
        <el-input
          v-model="formInline.owner"
          placeholder="请输入业主姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="warning"
          plain
          @click="onSearch"
        >查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="info"
          @click="onSubmit"
        >添加</el-button>
      </el-form-item>

      <!-- table表格 -->
      <el-table
        :row-class-name="tableRowClassName"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        >
        <el-table-column
          type="selection"
          width="55"
        >
          </el-table-column>
          <el-table-column
            label="业主姓名"
            prop="owner_name"
            width="100"
          >
            </el-table-column>

            <el-table-column
              label="业主电话"
              prop="owner_tel"
              width="150"
            >
              </el-table-column>

              <el-table-column
                label="家庭成员数"
                prop="owner_peoplenum"
                width="110"
              >
                </el-table-column>

                <el-table-column
                  label="楼号"
                  prop="owner_buildingnumber"
                  width="110"
                >
                  </el-table-column>

                  <el-table-column
                    label="单元号"
                    prop="owner_unit"
                    width="110"
                  >
                    </el-table-column>

                    <el-table-column
                      label="楼层数"
                      prop="owner_floor"
                      width="110"
                    >
                      </el-table-column>

                      <el-table-column
                        label="门牌号"
                        prop="owner_tablet"
                        width="110"
                      ></el-table-column>

                        <el-table-column
                          label="操作"
                          width="200"
                        >
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              @click="handleEdit(scope.$index, scope.row)"
                              type="success" plain
                            >编辑</el-button>
                              <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                              >删除</el-button>
                          </template>
                          </el-table-column>
                          </el-table>

                          <!-- 弹窗 -->
                          <div class="ownerModel">
                            <div
                              class="mask"
                              v-show="ownerBoolean"
                              @click="cancelModel"
                            >
                          </div>
                          <div
                            class="content"
                            :class="ownerBoolean ? 'ownerContent' : ''"
                          >
                            <el-form
                              :model="ruleForm"
                              status-icon
                              :rules="rules"
                              ref="ruleForm"
                              label-width="100px"
                              style="margin-left:20px"
                              class="demo-ruleForm"
                            >

                              <h3>{{ modelTitle }}业主</h3>
                              <el-form-item
                                label="业主姓名"
                                prop="name"
                              >
                                <el-input
                                  v-model="ruleForm.name"
                                  style="margin-left: -80px;width:260px"
                                ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="业主电话"
                                    prop="tel"
                                  >
                                    <el-input v-model="ruleForm.tel"
                                    style="margin-left: -80px;width:260px"
                                    ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                      label="家庭成员数"
                                      prop="num"
                                    >
                                      <el-input v-model="ruleForm.num"
                                      style="margin-left: -80px;width:260px"
                                      ></el-input>
                                      </el-form-item>
                                      <el-form-item
                                        label="楼号"
                                        prop="buildingnumber"
                                      >
                                        <el-input v-model="ruleForm.buildingnumber"
                                          style="margin-left: -80px;width:260px"
                                        ></el-input>
                                        </el-form-item>
                                        <el-form-item
                                          label="单元号"
                                          prop="unit"
                                        >
                                          <el-input v-model="ruleForm.unit"
                                            style="margin-left: -80px;width:260px"
                                          ></el-input>
                                          </el-form-item>
                                          <el-form-item
                                            label="楼层数"
                                            prop="floor"
                                          >
                                            <el-input v-model="ruleForm.floor"
                                              style="margin-left: -80px;width:260px"
                                            ></el-input>
                                            </el-form-item>
                                            <el-form-item
                                              label="门牌号"
                                              prop="tablet"
                                            >
                                              <el-input v-model="ruleForm.tablet"
                                                style="margin-left: -80px;width:260px"
                                              ></el-input>
                                              </el-form-item>

                                              <el-form-item>
                                                <el-button
                                                  type="primary"
                                                  @click="submitForm('ruleForm')"
                                                  style="margin-left:50px"
                                                >提交</el-button>
                                                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                                              </el-form-item>
                                              </el-form>
  </div>
  </div>

  <!-- 分页 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
      </el-pagination>
  </div>
  </el-form>
  </div>
</template>

<script>
import { Message } from "element-ui";
import {
  getownerList,
  addowner,
  delowner,
  ownerDetail,
  changeowner,
} from "../api/api";
export default {
  // 定义属性
  name: "User",
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入业主姓名"));
      } else {
        callback();
      }
    };
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入业主电话"));
      } else {
        callback();
      }
    };
    var checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入家庭成员数"));
      } else {
        callback();
      }
    };
    var checkBuildingnumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入楼号"));
      } else {
        callback();
      }
    };
    var checkUnit = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入单元号"));
      } else {
        callback();
      }
    };
    var checkFloor = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入楼层数"));
      } else {
        callback();
      }
    };
    var checkTablet = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入门牌号"));
      } else {
        callback();
      }
    };
    return {
      formInline: {
        user: "",
        region: "",
      },
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
      ownerBoolean: false,
      multipleSelection: [],
      total: 0,
      page: 1,
      size: 5,
      modelTitle: "添加",
      owner_id: null,
      ruleForm: {
        name: "",
        tel: "",
        num: "",
        buildingnumber: "",
        unit: "",
        floor: "",
        tablet: "",
      },
      rules: {
        name: [{ validator: checkName, trigger: "blur" }],
        tel: [{ validator: checkTel, trigger: "blur" }],
        num: [{ validator: checkNum, trigger: "blur" }],
        buildingnumber: [{ validator: checkBuildingnumber, trigger: "blur" }],
        unit: [{ validator: checkUnit, trigger: "blur" }],
        floor: [{ validator: checkFloor, trigger: "blur" }],
        tablet: [{ validator: checkTablet, trigger: "blur" }],
        // tablet: [{ required: true, message: "请输入门牌号", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 点击提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.modelTitle == "添加") {
            addowner({
              owner_name: this.ruleForm.name,
              owner_tel: this.ruleForm.tel,
              owner_peoplenum: this.ruleForm.num,
              owner_buildingnumber: this.ruleForm.buildingnumber,
              owner_unit: this.ruleForm.unit,
              owner_floor: this.ruleForm.floor,
              owner_tablet: this.ruleForm.tablet,
            }).then(res => {
              console.log(res);
              if (res.code == 200) {
                Message({
                  message: "恭喜你，添加成功",
                  type: "sucess",
                });
                this.getList();
                this.ownerBoolean = false;
              } else if (res.code == 201) {
                Message({
                  message: res.message,
                  type: "sucess",
                });
              }
            });
          } else if (this.modelTitle == "修改") {
            changeowner({
              owner_id: this.owner_id,
              owner_name: this.ruleForm.name,
              owner_tel: this.ruleForm.tel,
              owner_peoplenum: this.ruleForm.num,
              owner_buildingnumber: this.ruleForm.buildingnumber,
              owner_unit: this.ruleForm.unit,
              owner_floor: this.ruleForm.floor,
              owner_tablet: this.ruleForm.tablet,
            }).then(res => {
              console.log(res);
              if (res.code == 200) {
                Message({
                  message: res.message,
                  type: "success",
                });
                this.ownerBoolean = false;
                //  请求接口刷新列表
                this.getList();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 表格切换颜色
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    getList() {
      getownerList({
        page: this.page,
        size: this.size,
        owner_name: this.formInline.owner,
      }).then(res => {
        console.log(res);
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    // 点击搜索页搜索业主名
    onSearch() {
      console.log(this.formInline.owner);
      this.getList();
    },
    // 添加显示模态窗口
    onSubmit() {
      this.modelTitle = "添加";
      this.ownerBoolean = true;
    },
    // 点击编辑获取信息
    handleEdit(index, row) {
      console.log(index, row);
      this.owner_id = row.owner_id;
      ownerDetail({ id: row.owner_id }).then(res => {
        if (res.code == 200) {
          this.ruleForm.name = res.data.owner_name;
          this.ruleForm.tel = res.data.owner_tel;
          this.ruleForm.num = res.data.owner_peoplenum;
          this.ruleForm.buildingnumber = res.data.owner_buildingnumber;
          this.ruleForm.unit = res.data.owner_unit;
          this.ruleForm.floor = res.data.owner_floor;
          this.ruleForm.tablet = res.data.owner_tablet;
          this.modelTitle = "修改";
          this.ownerBoolean = true;
        }
      });
    },
    // 点击删除
    handleDelete(index, row) {
      console.log(index, row);
      delowner({ id: row.owner_id }).then(res => {
        console.log(res);
        if (res.code == 200) {
          Message({
            message: "删除成功",
            type: "sucess",
          });
          this.tableData.splice(index, 1);
        }
      });
    },
    // 点击条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getList();
    },
    // 点击页码切换到当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getList();
    },
    // 全选反选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 关闭模态窗口
    cancelModel() {
      this.ownerBoolean = false;
      // 重置按钮，重置表单rulefrom
      this.$refs["ruleForm"].resetFields();
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.user {
  padding: 30px 0 0 30px;
  h4 {
    margin-bottom: 15px;
  }
  .block {
    margin-top: 20px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .ownerModel {
    .mask {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 99;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .content {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%);
      transition: 0.5s;
      z-index: 100;
      background-color: #fff;
      opacity: 0;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 5px #ccc;
      visibility: hidden;
      h3 {
        margin-bottom: 15px;
        text-align: center;
      }
    }
    .ownerContent {
      top: 15%;
      opacity: 1;
      visibility: visible;
      width: 450px;
      .el-form-item__content::before {
        margin-left: 0;
      }

    }
  }
}
</style>